<template>
  <!-- 用户管理 -->
  <div class="role-manage-box">
    <CardItems
      ref="cardItemsRef"
      :card-config="cardConfig"
      :pop-config="popConfig"
      :select-config="selectConfig"
      :header-config="headerConfig"
      :dynamic-select-list="selectList"
      @selectChange="selectChange"
    />
  </div>
</template>

<script>
import CardItems from '@/components/CardItems'
import cardConfig from './config/cardConfig'
import popConfig from './config/popConfig'
import selectConfig from './config/selectConfig'
import headerConfig from './config/tableConfig'

export default {
  name: 'RoleManage',
  components: {
    CardItems
  },
  data() {
    return {
      selectList: []
    }
  },
  computed: {
    /**
     * 卡片配置
     */
    cardConfig() {
      return cardConfig['role-manage'] || {}
    },
    /**
     * 弹窗配置
     */
    popConfig() {
      return popConfig['role-manage'] || {}
    },
    /**
     * 筛选配置
     */
    selectConfig() {
      return selectConfig['role-manage'] || []
    },
    /**
     * 表头配置
     */
    headerConfig() {
      return headerConfig['role-manage'] || []
    }
  },
  methods: {
    /**
     * @param selectData 回传的表单选择数据
     * @param prop 事件触发的表单字段
     * @param selectList 回传的表单配置项
     */
    selectChange(selectData, prop, selectList) {
      // do some thing
      if (prop === 'status') {
        // this.$refs.cardItemsRef.setSelectModuleValue({
        // 需要重新给筛选框赋值数据
        // code: '11111'
        // })
        // this.selectList = newSelectList // 需要重新赋值给配置项的数据，例如： 修改optionList后重新赋值
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.role-manage-box {
  width: 100%;
  height: 100%;
}
</style>
